Skip to content

Fix a11y issues in input component#641

Open
fateeand wants to merge 22 commits into
masterfrom
588-fix-a11y-issues-in-input-component
Open

Fix a11y issues in input component#641
fateeand wants to merge 22 commits into
masterfrom
588-fix-a11y-issues-in-input-component

Conversation

@fateeand
Copy link
Copy Markdown
Collaborator

@fateeand fateeand commented May 22, 2026

Fixing accessibility issues in input component

Validation rules:

Validated using Playwright accessibility tests, Lighthouse tool, and manual checks including keyboard tab navigation and screen reader testing.

Full doc with rules

Playwright axe-core validation results:

State before:

Component aria-roles color-contrast label tabindex target-size
Input - ❌ ✅ - -

State after:

Component aria-roles color-contrast label tabindex target-size
Input ✅ ✅ ✅ ✅ ✅

Checklist

  • Keyboard Navigation
    All interactive elements are fully operable via keyboard only, including buttons, inputs, menus, dialogs, sliders, drag-and-drop, tree views, multi-selects, and composite widgets. No traps or dead ends.

  • Focus Management
    Focus is visible, logical, moves in predictable order, trapped where necessary (modals/popovers), and restored after closing. Focus is perceivable in all interactive widgets.

  • Semantics / ARIA

    • Semantic HTML is used correctly.
    • ARIA roles, states, and properties are applied only when needed.
    • All form fields, tables, and widgets (including autocomplete, tree selects, tree tables, drag-and-drop, sliders, and multi-selects) are properly labeled and accessible.

  • Color / Contrast

    • Text and interactive elements meet contrast requirements (≥4.5:1 normal text, ≥3:1 large text).
    • Focus and selection indicators are visually perceivable.
    • Color is not the only indicator of state.

  • Screen Reader / Assistive Technology

    • All content, labels, and dynamic updates are perceivable via screen readers.
    • Live regions announce status messages, alerts, modals, notifications, and dynamic changes.
    • Interactive widgets provide proper announcements of selection and updates.

  • Responsive & Zoom

    • Components function correctly and remain readable at all viewport sizes and up to 200% zoom, including mobile and touch devices.
    • Prefer em/rem units over px where scaling is required.

  • Error Handling

    • Errors are clearly identified visually and programmatically.
    • Form inputs use aria-describedby or aria-invalid for inline messages.
    • Instructions and suggestions are accessible.

  • Dynamic Content / Updates

    • Status updates, alerts, notifications, and modals use live regions.
    • Updates do not disrupt focus or user control unexpectedly.

  • Interaction Feedback / States

    • All interactive states (hover, focus, active, disabled, drag-and-drop, reordering, multi-select) are visually perceivable.

  • Authentication & Sensitive Actions

    • Inputs and actions involving sensitive data provide accessible instructions, feedback, and error messages.

  • Predictable & Controllable UI

    • Components behave consistently and predictably.
    • Popups, modals, autocomplete suggestions, drag-and-drop, and dynamic content allow user control.

Release notes:

  • Fix a11y issues in input component

@fateeand fateeand requested a review from korel-san as a code owner May 22, 2026 20:32
Copilot AI review requested due to automatic review settings May 22, 2026 20:32
@fateeand fateeand linked an issue May 22, 2026 that may be closed by this pull request
Fix a11y issues in input component #588
Open
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 22, 2026 •
edited
Loading

Coverage report for library

St.❔
 Category Percentage Covered / Total
🔴 Statements 42.83% 3020/7051
🔴 Branches 37.22% 1281/3442
🔴 Functions 42.37% 583/1376
🔴 Lines 43.5% 2832/6511

Test suite run success

951 tests passing in 32 suites.

Report generated by 🧪jest coverage report action from 5c65b7d

Copilot AI reviewed May 22, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves accessibility across the UI kit’s input-related controls, primarily by enhancing cps-input semantics (labeling, ARIA attributes, keyboard operability, and focus styling) and updating component usages/tests to comply with the new requirements.

Changes:

  • Added explicit ariaLabel support (and related enforcement) for cps-input/cps-datepicker, and propagated aria labels into consuming templates (tables, filters, composition demos).
  • Improved cps-input accessibility behavior: unique input id, label association, aria-invalid/required/busy, accessible clear + password-toggle interactions, and focus-ring styling.
  • Expanded unit + Playwright axe coverage for the input component page.

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html Adds aria label for global filter input.
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html Adds aria label for global filter input.
projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter-constraint/table-column-filter-constraint.component.html Adds aria labels for text/number/date filter inputs.
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html Adds aria-busy while loading.
projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html Replaces empty visual label with ariaLabel.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts Adds aria labeling props, required detection, keyboard focus tracking, id generation, and updated enter/clear behavior.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html Adds for/id association, ARIA attrs, accessible icon/button interactions, and error live-region markup.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.scss Updates layout + focus styling to support new structure and keyboard focus indication.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.spec.ts Updates existing tests and adds accessibility-focused unit tests.
projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts Adds ariaLabel + validation warning on missing labeling.
projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.html Passes ariaLabel and adds prefix icon aria label.
projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.scss Aligns focus styling with new cps-input wrapper border behavior.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html Adds aria-busy while loading/validating.
projects/composition/src/app/pages/input-page/input-page.component.ts Adds example handling for clickable prefix icon (notification).
projects/composition/src/app/pages/input-page/input-page.component.html Updates width units; demonstrates clickable prefix icon + aria label.
projects/composition/src/app/pages/input-page/input-page.component.scss Converts spacing from px to rem.
projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html Adds aria label to search input.
projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.html Adds aria label to search input.
projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.html Adds aria label to sidebar search input.
projects/composition/src/app/api-data/cps-input.json Documents new ariaLabel / prefixIconAriaLabel props and default icon size change.
projects/composition/src/app/api-data/cps-datepicker.json Documents new ariaLabel prop.
playwright/cps-accessibility.spec.ts Re-enables input page axe scan with scoped selector.

Comment thread projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
Comment thread projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html Outdated
Comment thread projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 22, 2026 •
edited
Loading

Playwright test results

passed  74 passed

Details

stats  74 tests across 4 suites
duration  2 minutes, 16 seconds
commit  5c65b7d
info  For details, download the Playwright report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@korel-san korel-san Awaiting requested review from korel-san korel-san is a code owner

@TerranceKhumalo-absa TerranceKhumalo-absa Awaiting requested review from TerranceKhumalo-absa TerranceKhumalo-absa is a code owner

@lukasmatta lukasmatta Awaiting requested review from lukasmatta lukasmatta is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix a11y issues in input component

2 participants

@fateeand